<template>
  <div class="pdv-9 pdh-4">
    <div class="input-row-wrap">
      <div class="name"><i class="required color-red">*</i>预约日期：</div>
      <input
        @focus="showTimePicker()"
        placeholder="请选择预约日期"
        v-model="yuYueDate"
        :disabled="formDisabled"
        type="text"
      />
    </div>

    <div class="input-row-wrap">
      <div class="name"><i class="required color-red">*</i>您的手机号：</div>
      <input
        placeholder="请输入手机号"
        v-model="form.mobile"
        :disabled="formDisabled"
        type="text"
      />
    </div>

    <div class="input-row-wrap">
      <div class="name">备注说明：</div>
      <textarea
        placeholder="请输入备注说明"
        v-model="form.note"
        :disabled="formDisabled"
        name
        cols="20"
        rows="5"
      ></textarea>
    </div>

    <p class="tips">
      <span>提示：</span
      >在商家未确认前随时可取消，但在商家确认后，可在预约时间前6小时撤销。
    </p>

    <div
      v-if="query.status != 5"
      :class="['default-block-btn', { 'default-disabled': isSucceed }]"
      v-preventReClick="1000"
      @click="submit($event)"
    >
      提交
    </div>
    <div
      v-if="query.status == 5 "
      :class="['default-block-btn', { 'default-disabled': isCxSucceed }]"
      v-preventReClick="1000"
      @click="updateYuyue($event)"
    >
      修改预约
    </div>
    <div
      v-if="query.status == 5"
      :class="['default-block-btn', { 'default-disabled': isCxSucceed }]"
      v-preventReClick="1000"
      @click="withdraw($event)"
    >
      申请撤销
    </div>
    <dialogMore :title="'申请撤销'" ref="dialog">
      <section>
        <section class>
          <div class="input-row-wrap">
            <div class="name"><i class="required color-red">*</i>理由：</div>
            <cube-radio-group
              v-model="withdrawForm.ly"
              :options="typeOptions"
              :col-num="1"
            />
          </div>

          <div class="input-row-wrap">
            <div class="name">备注：</div>
            <textarea
              placeholder="请输入说明"
              v-model="withdrawForm.sm"
              name
              cols="20"
              rows="5"
            ></textarea>
          </div>

          <!-- <p class="tips">
            <span>提示：可在预约时间前24小时内撤销，预约时间为2020-09-12，</span
            >截止目前已超过撤销时限，很抱歉！
          </p> -->

          <div
            :class="['default-block-btn', { 'default-disabled': isCxSucceed }]"
            v-preventReClick="1000"
            @click="submitCx($event)"
          >
            提交
          </div>
        </section>
      </section>
    </dialogMore>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import loginService from "@/service/loginService";
import moment from "moment";
import dialogMore from "../../../../components/layout/dialogMore.vue";
export default {
  name: "apply",
  components: { dialogMore },
  data() {
    return {
      query: this.$route.query, //从兑换记录进来带参数
      tabIndex: 0,
      title: "",
      content: "",
      userInfo: {}, //用户信息
      orderInfo: JSON.parse(sessionStorage.getItem("orderInfo")), //订单信息
      orderDetail: JSON.parse(sessionStorage.getItem("orderDetail")), //订单详细信息(包含预约记录)
      datePicker: null,
      isSucceed: false, //预约是否调用成功
      form: {
        mobile: "",
        note: "",
        orderId: "",
        yuYueDate: "",
      },
      yuYueDate: "",
      formDisabled: false,
      isCxSucceed: false, //立即兑换是否调用成功
      withdrawForm: {
        // 取消form
        ly: "",
        sm: "",
      },
      typeOptions: [
        {
          label: "临时有事",
          value: 1,
        },
        {
          label: "突然不想去了",
          value: 2,
        },
        {
          label: "天气不好",
          value: 3,
        },
        {
          label: "其他",
          value: 4,
        },
      ],
    };
  },
  created() {
    this.userInfo = this.$localStorage.get("userInfo");
    if (this.query.status == 5) {
      //待商家确认
      this.form = this.orderDetail.yuyueRecords[0];
      this.yuYueDate = moment(this.orderDetail.yuyueRecords[0].yuyueDate).format(
        "YYYY-MM-DD"
      );
      this.form.yuYueDate = this.yuYueDate;
      this.formDisabled = false;
    }
  },
  methods: {
    showTimePicker() {
      this.$createDatePicker({
        min: new Date(),
        max: new Date(2099, 7, 8),
        value: new Date(),
        onSelect: (selectedTime, selectedText, formatedTime) => {
          this.yuYueDate = moment(selectedTime).format("YYYY-MM-DD");
          this.form.yuYueDate = this.yuYueDate;
        },
      }).show();
    },
    // 点击申请撤销
    withdraw(e) {
      if (e.target.disabled) {
        return false;
      }
      this.getDictValue()
      this.$refs.dialog.show();
    },
    update(){
      this.formDisabled = false
    },
    updateYuyue(e){
      if (e.target.disabled) {
        return false;
      }
      if (this.form.yuYueDate === "") {
        return tools.tip("请选择预约日期！");
      }
      if (this.form.mobile === "") {
        return tools.tip("请填写手机号！");
      }
      if (!/^1[3456789]\d{9}$/.test(this.form.mobile)) {
        return tools.tip("手机号码格式有误，请重新输入");
      }
      // this.$emit("applySuccess"); //临时跳过
      console.log('this.formthis.form',this.form);
      this.form.orderId = this.orderInfo.id;
      let data = {
        id: this.orderDetail.yuyueRecords[0].id,
        mobile: this.form.mobile,
        note: this.form.note,
        yuyueDate: this.form.yuYueDate
      }
      this.fetchService.updateYuyueRecord(data).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        this.isSucceed = true;
        tools.tip(res.message);

        setTimeout(() => {
          tools.back(); //返回上一步
        }, 500);
      });
    },
    // 撤销提交
    submitCx(e) {
      if (e.target.disabled) {
        return false;
      }
      var data = {
        orderId: this.orderInfo.id,
        yuYueRecordId: this.form.id,
        cancelKey:this.withdrawForm.ly,
        cancelNote:this.withdrawForm.sm
      };
      this.fetchService.mallOrderCancelYuyue(data).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        this.isCxSucceed = true;
        this.$refs.dialog.back();
        tools.tip("撤回成功！");
        setTimeout(() => {
          tools.back(); //返回上一步
        }, 200);
      });
    },
    // 提交
    submit(e) {
      if (e.target.disabled) {
        return false;
      }
      if (this.form.yuYueDate === "") {
        return tools.tip("请选择预约日期！");
      }
      if (this.form.mobile === "") {
        return tools.tip("请填写手机号！");
      }
      if (!/^1[3456789]\d{9}$/.test(this.form.mobile)) {
        return tools.tip("手机号码格式有误，请重新输入");
      }
      // this.$emit("applySuccess"); //临时跳过
      console.log('this.formthis.form',this.form);
      this.form.orderId = this.orderInfo.id;
      this.fetchService.mallOrderYuyue(this.form).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        this.isSucceed = true;
        tools.tip(res.message);

        setTimeout(() => {
          tools.back(); //返回上一步
        }, 2000);
      });
    },
    getDay(createTime){
      return moment(createTime).format('YYYY-MM-DD日 HH:mm:ss')
    },
    getDictValue () {
      let data={
        catKey:'CAT_MALL_',
        treeKey:'DDCXZ'
      }
      this.fetchService.dictValue(data).then(res => {
        if(res.code === 0){
          this.typeOptions = []
          res.data.forEach((item,index)=>{
            this.typeOptions.push({
              label: item.value,
              value: item.key,
            },)
          })
        }
      })
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.tips {
  font-size: $defaultFontSize;
  color: #e20002;
  line-height: 41px;
  > span {
    color: #343434;
  }
}
.default-block-btn{
  font-size: 18PX;
}
</style>
